/*
  学习目标：使用useState三个注意事项
*/
import React, { useState } from 'react';
import './index.css';

export default function App() {
  // 1. useState是一个函数， 需要使用多个状态，连续调用useState即可
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('');

  // 2. useState的初始值，可以是任意类型
  // 声明数组
  const [list, setList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }]);
  console.log('list  ----->  ', list);
  // 声明对象
  const [obj, setObj] = useState({ name: 'zs', age: 18 });
  // 👎不推荐声明JSX
  const [h2Dom, setH2Dom] = useState(<h2>我是JSX</h2>);

  // 3.语法规范问题
  // const  [变量名， set大写驼峰变量名] = useState()
  // 快捷键useState
  const [count2, setCount2] = useState(0);

  return (
    <div>
      {list.map((item) => (
        <h1 key={item.id}>{item.id}</h1>
      ))}
      count: {count}
      h2DOM --- {h2Dom}
      <h1>{msg}</h1>
      <h3>
        我是对象 --- {obj.age} --{obj.name}
      </h3>
      <button onClick={() => setMsg(msg + '~')}>点击改变Msg</button>
    </div>
  );
}
